import React from "react";
import {SafeAreaView, ScrollView, Text, View} from "react-native";
import Checkbox from "react-native-check-box";

import styles from "./style";
import colors from "../../styles/colors";
import {Icon} from "../../components/AroIconfont";


export default self => (
  <SafeAreaView style={styles.safeAreaContainer}>
    <View style={styles.container}>
      <View style={styles.balanceTopContainer}>
        <View style={styles.header}>
          <Text style={styles.headerLeft}/>
          <Text style={styles.headerCenter}>我的资产</Text>
          <Text style={styles.headerRight}>资金记录</Text>
        </View>
        <View style={styles.summaryContainer}>
          <View style={styles.summaryLeft}>
            <Text style={styles.summaryLeftText1}>总资产折合(CNY)</Text>
            <Text style={styles.summaryLeftText2}>5230.66</Text>
            <Text style={styles.summaryLeftText3}>≈ 1.6623 BTC</Text>
          </View>
          <View style={styles.summaryRight}>
            <Checkbox
              style={styles.checkboxItem}
              isChecked={true}
              onClick={() => {}}
              checkedImage={<Icon name={'aroIcon|iconiconcheckbox_ok'} size={14} color={colors.white}/>}
              unCheckedImage={<Icon name={'aroIcon|iconcheckbox_o'} size={14} color={colors.white}/>}
              rightTextView={
                <Text style={styles.checkboxText}>隐藏小额币种</Text>
              }
            />
          </View>
        </View>
      </View>
      <View style={styles.balanceBottomContainer}>
        <View style={styles.bottomContainerPosition}>
          <ScrollView style={styles.scrollContainer}>
            <View style={styles.listContainer}>

              <View style={styles.listItem}>
                <View style={styles.listTop}>
                  <Text style={styles.listTopText}>ZC</Text>
                </View>
                <View style={styles.listBottom}>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomText1}>可用</Text>
                    <Text style={styles.listBottomText2}>1005.22</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomText1}>冻结</Text>
                    <Text style={styles.listBottomText2}>1005.22</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomText1Last}>折合(CNY)</Text>
                    <Text style={styles.listBottomText2Last}>1005.22</Text>
                  </View>
                </View>
              </View>

              <View style={styles.listItem}>
                <View style={styles.listTop}>
                  <Text style={styles.listTopText}>ZC</Text>
                </View>
                <View style={styles.listBottom}>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomText1}>可用</Text>
                    <Text style={styles.listBottomText2}>1005.22</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomText1}>冻结</Text>
                    <Text style={styles.listBottomText2}>1005.22</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomText1Last}>折合（CNY）</Text>
                    <Text style={styles.listBottomText2Last}>1005.22</Text>
                  </View>
                </View>
              </View>

            </View>
          </ScrollView>
        </View>
      </View>
    </View>
  </SafeAreaView>
);